import React, { Component } from 'react'
import './index.css';
//引入默认配置后的axios对象
import axios from '../../utils/xhr';

export default class Web extends Component {
    state = {
        //form相关
        name: '',
        url: '',
        type: '',
        keywords: '',

        // 这里列表数据的初始值一定要设置为 『数组』
        webs: [], 

        //双击功能
        isDBC: false, //是否双击
        DBCID: null, //双击元素的 id

        //是否新增
        isNew: false
    }
    //调用次数
    render() {
        //解构赋值
        let { name, url, type, keywords, DBCID, isDBC } = this.state;
        return (
            <div className="web-container">
                <div className="title">
                    <h2>网址管理</h2>
                    <span onClick={this.showNew}>添加</span>
                </div>
                <hr />
                <div className={`form ${this.state.isNew ? '' : 'hidden'}`}>
                    <div> 标题: <input type="text" name="name" onChange={this.saveData} value={name} /></div>
                    <div>网址: <input type="text" name="url" onChange={this.saveData} value={url} /></div>
                    <div>类型: <input type="text" name="type" onChange={this.saveData} value={type} /></div>
                    <div>关键字: <input type="text" name="keywords" onChange={this.saveData} value={keywords} /></div>
                    <button onClick={this.add}>新增</button>
                </div>
                { this.state.isNew && <hr />}
                <div className="search"><input type="text" ref={el => this.input = el} /> <button onClick={this.search}>搜索</button></div>
                <hr />
                <div className="table">
                    <table border="1" width="100%">
                        <thead><tr><td>ID</td><td>标题</td><td>URL</td><td>类型</td><td>关键字</td><td>操作</td></tr></thead>
                        <tbody>
                            {
                                this.state.webs.map(item => {
                                    return <tr key={item.id}><td>{item.id}</td>
                                        <td onDoubleClick={this.dblclick(item.id)}>
                                            {isDBC && DBCID === item.id ? <input type="text" defaultValue={item.name} autoFocus
                                                onBlur={this.blur(item.id)} /> : item.name}
                                        </td>
                                        <td><a rel="noreferrer" target="_blank" href={item.url}>{item.url}</a></td>
                                        <td>{item.type}</td><td>{item.keywords}</td>
                                        <td><button onClick={this.remove(item.id)}>删除</button></td></tr>
                                })
                            }
                        </tbody>
                    </table>

                </div>
            </div>
        )
    }

    showNew = () => {
        this.setState({
            isNew: !this.state.isNew
        })
    }        

    //搜索
    search = async () => {
        //获取关键字
        let keyword = this.input.value;
        try {
            //发送请求
            let result = await axios.get('/web', {
                params: {
                    q: keyword
                }
            });

            this.setState({
                webs: result.data
            })
        } catch (e) {
            alert('搜索失败, 请稍后再试')
        }
    }

    //方法
    dblclick = (id) => {
        return () => {
            //修改状态
            this.setState({
                isDBC: true,
                DBCID: id
            })
        }
    }

    //丧失焦点
    blur = (id) => {
        return async e => {
            //获取输入的新内容 
            let newV = e.target.value;
            //更新    post patch put  
            let result = await axios.patch('/web/' + id, { id: id, name: newV });
            //
            // console.log(result.data);  {id:5, name: '一言2'}
            //修改webs的状态数据
            this.setState({
                webs: this.state.webs.map(item => {
                    //如果当前元素的 id 与正在修改的元素 id 相同, 则用服务器返回的数据, 代替原来的数据
                    if (item.id === id) {
                        return result.data;
                    }
                    return item
                }),
                //复原状态
                isDBC: false,
                DBCID: null
            })
        }
    }

    //删除网址
    remove = (id) => {
        return async (e) => {
            //确定是否删除
            if (!window.confirm('你确定要删除该记录么???')) return;
            //  delete 
            let result = await axios.delete(`/web/${id}`);
            //更新列表
            this.setState({
                webs: this.state.webs.filter(item => item.id !== id)
            })
            //提示
            alert('删除成功');
        }

    }

    //组件挂载完毕回调
    async componentDidMount() {
        let result = await axios('/web');
        this.setState({
            webs: result.data
        })
    }

    saveData = (e) => {
        //获取当前 input 元素的 name 属性
        let key = e.target.name;
        this.setState({
            [key]: e.target.value
        })
    }

    //新增网址
    add = async () => {
        let { name, url, type, keywords } = this.state;

        try {
            //获取表单中的数据
            let result = await axios({
                method: 'post',
                url: '/web',
                //设置请求体
                data: {
                    name,
                    url,
                    type,
                    keywords
                }
            });
            //结果处理
            //将成功的数据, 存入 webs 状态中
            this.setState({
                webs: [...this.state.webs, result.data]
            });
            alert('添加成功');
        } catch (e) {
            alert('添加失败');
        }
    }
}
